<!-- 待考试卷-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" style="height: 100px; margin: 10px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="卷名">
            <el-input v-model="form.content"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="考试时间">
          <el-col :span="4">
            <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="开始日期"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="结束日期" value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row :gutter="12">
      <el-col :span="2" :offset="20">
        <el-button type="primary" @click="searchTable(form)">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="emptySearch(form)">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="22">
        <el-button type="primary" @click="openDialog">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="paperName" label="卷名" align="center"> </el-table-column>
      <el-table-column prop="qrCode" label="二维码" align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="" trigger="hover">
            <img :src="scope.row.qrCode" alt="" style="width: 150px;height: 150px">
            <img slot="reference" :src="scope.row.qrCode" style="width: 80px;height: 80px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="waitState" label="待考状态" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.waitState == 0">未完成</el-tag>
          <el-tag v-else>已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="waitUserNum" label="待考人数" align="center"> </el-table-column>
      <el-table-column prop="alreadyUserNum" label="已考人数" align="center"> </el-table-column>
      <el-table-column prop="waitTime" label="截止日期" align="center"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="goExamination(scope.row)" type="text" size="small">去考试</el-button>
          <el-button @click="pushPaper(scope.row)" type="text" size="small">结束考试</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col>
        <pagination :pageNum="seaechParams.current" :total="total" :pageSize="seaechParams.size" @sizeChange="sizeChange"
          @currentChange="currentChange"></pagination>
      </el-col>
     
    </el-row>

 
  </div>
</template>
  
  
<script>
import AddPaper from "@/views/onlineQuestion/addPaper.vue";
import Pagination from "@/components/Pagination/pagination.vue";
import AllocationQuetsion from "@/views/onlineQuestion/allocationQuestion.vue";
import { queryWaitPaperAll,queryPaperInfo } from '@/api/onlineQuestion/paperQuestion'

export default {
  components: { AddPaper, Pagination, AllocationQuetsion },
  name: "waitPaper",
  data() {
    return {
      waitPaperName: "",
      paperId: 0,
      paperName: "",
      dialogTableVisible: false,
      tableData: [],
      total: 1,
      form: {
        content: "",
        startDate: "",
        endDate: "",
      },
      seaechParams: {
        current: 1,
        size: 10
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.queryPaperAll();
  },
  mounted() { },
  methods: {
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.seaechParams.current = val;
      //刷新表格
      this.queryAll(this.form);
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.seaechParams.size = val;
      //刷新表格
      this.queryAll(this.form);
    },
    //获取试卷列表
    queryPaperAll() {
      queryWaitPaperAll(JSON.stringify(this.seaechParams)).then(res => {
        this.tableData = res.data.records;
      })
    },
    //重置搜索框
    emptySearch(form) {
      form.content = "";
      form.startDate = "";
      form.endDate = "";
    },
    openDialog() {
      this.$refs.dialog.show();
    },
    //下发考试
    pushPaper(row) {
      this.waitPaperName = row.paperName
      //打开下发页面
      this.$refs.pushDialog.show();
    },
    //去考试
    goExamination(row) {
      //跳转到预考页面
      this.$router.push({ name: 'previewExam', params: { waitPaperId: row.waitPaperId } })
    },
    // 查看详情
    handleClick(row){
      this.$router.push({ name: 'waitPaperDetail', params: { examResultId: row.examResultId }})
    }
  },


};
</script>>
  
<style>
.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: hwb(210 95% 5%);
}

.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}

.app-container {
  height: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
</style>
  